<template>
    <div class="default-main">
        <el-row :gutter="10">
            <template v-for="(item, index) in room.list" :key="index">
                <el-col :span="6" style="margin-top: 10px">
                    <el-card shadow="hover" class="centered-content">
                        <template #header>
                            <div class="RoomTitleBox" style="display: flex">
                                <div class="RoomNo" style="width: 50%">房间名称：{{ item.room_name }}</div>

                                <div class="State" style="width: 50%; text-align: right; padding-right: 10px">
                                    <template v-if="item.status == 0">
                                        <el-tag type="danger" effect="dark"> 使用中 </el-tag>
                                    </template>
                                    <template v-else>
                                        <el-tag type="success" effect="dark"> 闲置中 </el-tag>
                                    </template>
                                </div>
                            </div>
                        </template>
                        <div style="display: flex; justify-content: center; align-items: center; height: 100%">
                            <template v-if="item.status == 0">
                                <img
                                    src="~assets/icons/麻将桌.svg"
                                    alt="麻将桌"
                                    style="filter: drop-shadow(1000px 0 0 red); transform: translate(-1000px)"
                                />
                            </template>
                            <template v-else>
                                <img
                                    src="~assets/icons/麻将桌.svg"
                                    alt="麻将桌"
                                    style="filter: drop-shadow(1000px 0 0 #67c23a); transform: translate(-1000px)"
                                />
                            </template>
                        </div>
                        <template #footer>
                            <div class="RoomTitleBox" style="display: flex; align-items: center">
                                <div style="width: 50%">单价：{{ item.price }}元</div>
                                <div style="display: flex; align-items: center; justify-content: flex-end; width: 50%">
                                    <template v-if="item.status == 0">
                                        <div style="padding-right: 10px">{{ item.time }}</div>
                                        <el-button type="danger" round size="small" @click="EndOrder(item.id)">结束</el-button>
                                    </template>
                                    <template v-else>
                                        <el-button type="success" round size="small" @click="StartOrder(item.id)">开启</el-button>
                                    </template>
                                </div>
                            </div>
                        </template>
                    </el-card>
                </el-col>
            </template>
        </el-row>
        <PopupForm />
    </div>
</template>

<script setup lang="ts">
import { round } from 'lodash-es'
import { ElMessageBox } from 'element-plus'
import { baTableApi } from '/@/api/common'
import { onMounted, reactive, onUnmounted } from 'vue'
import PopupForm from './popupForm.vue'
import { useRoomStore } from './workbench'
defineOptions({
    name: 'workbench',
})
const roomStore = useRoomStore()
const room = reactive({
    dialogVisible: false,
    CurrentRoomId: 0,
    StartTime: 0,
    EndTime: 0,
    list: [
        {
            id: 2,
            room_name: '高级1',
            room_type_id: 2,
            price: 20,
            status: 1,
            remark: '',
            weigh: 10,
            update_time: 1734677152,
            create_time: 1734615996,
            time: '',
            roomType: {
                type_name: '高级麻将桌',
            },
        },
    ],
})
const timerId: any = reactive({
    id: null,
})
//计算单价

const CalculateUnitPrice = (TimeNur, price) => {
    //30分钟为一个阶段
    const diff = TimeNur
    const minutes = Math.floor(diff / 60)
    const Nur = Math.floor(minutes / 30)
    console.log(diff, minutes, Nur)
    if (minutes - Nur * 30 >= 5) {
        return round(((Nur + 1) * price) / 2, 2)
    } else {
        return round((Nur * price) / 2, 2)
    }
}
const updateTime = () => {
    const now = new Date()
    room.list.forEach((item) => {
        if (item.status === 0 && item.update_time) {
            const diff = Math.floor((now.getTime() - item.update_time * 1000) / 1000)
            const minutes = Math.floor(diff / 60)
            const seconds = diff % 60
            if (minutes > 0) {
                item.time = `${minutes}分钟(${CalculateUnitPrice(diff, item.price)}元)`
            } else {
                item.time = `${seconds}秒(${CalculateUnitPrice(diff, item.price)}元)`
            }
        }
    })
}
const StartOrder = (id: any) => {
    ElMessageBox.confirm('确定要开始吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        //执行开始订单
        const api = new baTableApi('/admin/room.Info/')
        const params = {
            id: id,
            status: '0',
        }
        api.postData('edit', params).then((res) => {
            console.log(res)
            if (res.code == 1) {
                room.list.forEach((item) => {
                    if (item.id === id) {
                        item.status = 0
                        item.update_time = res.time
                    }
                })
            }
        })
    })
}
const EndOrder = (id: any) => {
    const now = new Date()
    room.list.find((item) => {
        if (item.id === id) {
            //获取开始和结束时间
            roomStore.room.StartTime = item.update_time * 1000
            roomStore.room.EndTime = now.getTime()
            roomStore.room.RoomPrice = item.price
        }
    })

    //设置当前房间ID
    roomStore.room.CurrentRoomId = id
    //设置弹出层可见
    // room.dialogVisible = true
    roomStore.room.dialogVisible = true
    roomStore.room.list = room.list
}
onMounted(() => {
    const api = new baTableApi('/admin/room.Info/')
    api.index().then((res) => {
        room.list = res.data.list
    })
    timerId.id = setInterval(updateTime, 1000)
})
onUnmounted(() => {
    if (timerId.id) {
        clearInterval(timerId.id)
    }
})
</script>

<style scoped lang="scss">
.banner {
    margin: 20px;
}

.centered-content .el-card__body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
</style>
